<template>

    <div class="body" v-loading="loading"><div class="header">
      <div class="title"><span>大连德原工业有限公司称重申请单</span></div>
    </div>

      <el-form ref="form" :model=" receform " size="small" label-width="auto" class="body1">
        <el-row class="rowLight">
          <el-col :span="10" >
            <el-form-item label="供应商名称:" class="no-wrap-label">{{ receform.supplierName }}</el-form-item>
          </el-col>

        </el-row>

         <el-row class="rowLight">
           <el-col :span="10">
             <el-form-item label="订单编号:" class="no-wrap-label">{{ receform.billNo }}</el-form-item>
           </el-col>
           <el-col :span="10">
             <el-form-item label="订单日期:" class="no-wrap-label">{{ receform.createTime }}</el-form-item>
           </el-col>
         </el-row>
          <el-row class="rowLight">
            <el-col :span="10">
              <el-form-item label="物料名称:" class="no-wrap-label">{{ receList[0].materialName }}</el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="物料规格:" class="no-wrap-label">{{receList[0].specification }}</el-form-item>
            </el-col>
          </el-row>

      </el-form>
      <div class="qrCode">
        <vue-qr ref="qrCode" :text="qrText" style="margin: 0 20px 10px 0" width="220" height="220"></vue-qr>
      </div>

  </div>
</template>
<script>
import {detail} from '@/api/app/receive'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
export default {
  name:'receivedetail',
  components:{
    vueQr
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'mini'
    },
    info: {
      type: Object,
    },
  },
  data() {
    return {
      receform:{},
      receList:[],
      qrText:'',
      billNo:''

    }
  },
  watch:{
    show(val){
      if(val){
      }
    }
  },
  methods: {
    open(){
      detail({billNo : this.billNo}).then(res => {
        if (res.status == 200) {
          this.receform = res.data.data;
          this.receList = res.data.dataList;
          this.qrText = res.data.qrCode;
        } else {
          this.$message.error('获取详情失败2，请稍后再试');
        }
      }).catch(error => {

        this.$message.error('获取详情失败，请稍后再试');
      });
    },
    closeForm(){
      this.$emit('update:show', false)
    }
  },
  mounted() {
    this.billNo = this.$route.query.billNo
    this.open()
  }
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';

.body {
  .order{
    font-size: 40px;
  }
  .body1 {
    padding: 10px 20px 20px 20px;
    font-family: 黑体;

    .rowLight{

      margin-left: 400px;
    }
  }
  width: 100%;
  .header {
    padding: 0 30px 30px;
    display: flex;
    justify-content: space-between;
    .title {
      text-align: center;
      font-size: 35px;
      width: 100%;
      padding-left: 100px;
      padding-top: 50px;
    }
  }


  .qrCode{
    padding: 0 25px 30px;
    display: flex;

    width: 500px;
    height: 300px;
    margin-left: 400px;
  }



}
@media print {
  .buttonNoPrint{
    display: none;
  }
}
</style>
